<!-- 我的评论页面 -->
<template>
	<view class="evaluate">
		<view class="_evaluate">
			<view style="margin-bottom: 10rpx;">
				<u-tabs :current="current" :is-scroll="false" :list="list" active-color="rgb(247, 155, 41)"
					bg-color="#f2f2f2" @change="change"></u-tabs>
			</view>
			<!-- 评论内容 -->
			<view v-for="(item, index) in critic" :key="index" class="Evaluation_details">
				<!-- 我，头像，星星 -->
				<view class="xing">
					<view class="_Evaluation_details">
						<!-- 星星左边 -->
						<view class="my">
							<u-avatar :size="70" :src="item.from_user.avatar"></u-avatar>
							<!-- <image :src="item.from_user.avatar" mode=""></image> -->
							<view class="message">
								<p>{{ item.from_user[$t('item.user.username')] }}</p>
								<p>{{ time('S', item.createtime, '-').split(' ')[0] }}</p>
							</view>
						</view>
						<!-- 星星 -->
						<view class="Score">
							<u-rate :current="item.total_score" :disabled="true" active-color="#F79B29" gutter="27"
								inactive-color="#E2E2E2" size="35"></u-rate>
						</view>
					</view>
					<!-- 评论的话 -->
					<view class="described">
						{{ item[$t('item.content')] }}
					</view>
					<!-- 图片 -->
					<view class="tp" v-if="item.images&&(item.images.length > 0)">
						<u-image v-if="ele&&ele!=''" class="ui-image" width="300rpx" height="300rpx"
							v-for="(ele, imageIndex) in item.images" :key="imageIndex" :src="ele"></u-image>
					</view>
				</view>
				<!-- 左下角购买的信息 -->
				<view class="bottom" v-if="item.release_info.id">
					<view>{{item.order_no}}</view>
					<view style="margin-left: 30px;" @click="detail(item.order_id,item.order_type,item.join_order_id)">
						{{$t('查看详情')}}</view>
				</view>
				<view class="bottom" v-if="item.release_info.id">
					<view>{{ item[$t('item.show_text')] }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		IMAGE_URL
	} from "@/config/app"

	export default {
		data() {
			return {
				list: [{
						name: '我发布的'
					},
					{
						name: '我参与的'
					}
				],
				current: 0,
				critic: [],
				type: 1,
				page: 1,
				lang: 'zh',
			}
		},
		async onLoad() {
			await this.request()
		},
		onShow() {
			this.getLang()
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: this.$t("我的评论")
			})
		},
		onReachBottom() {
			this.page = 2
			this.$u.api.order.getRateList({
				type: this.type,
				page: this.page
			}).then(res => {
				if (res.length <= 0) {
					this.$u.toast(this.$t('没有数据了'))
				} else {
					this.critic = [...this.critic, ...res]
					this.page++
				}
			})
		},
		// onPullDownRefresh() {
		//   // 监听用户下拉刷新用的
		//   this.$u.api.order.getRateList(
		//       {type: this.type, page: this.page}
		//   ).then(res => {
		//     this.critic = res
		//     this.page = 1
		//     // 关闭下拉加载的图标
		//     uni.stopPullDownRefresh()
		//   })
		// },
		methods: {
			// 获取当前缓存语言
			getLang() {
				// 获取缓存lang当前语言值
				uni.getStorage({
					key: 'lang',
					success: res => {
						if (res.data == 'zh') { //zh为中国，赋值0
							this.lang = 'zh'
						} else { //其他为俄罗斯，赋值1
							this.lang = 'ru'
						}
					}
				});
			},
			time(type = "MS", date1, str = "year") {
				if (type === "S") date1 = date1 * 1000 //秒
				let year = new Date(date1).getFullYear();
				let month = (new Date(date1).getMonth() + 1) > 9 ? (new Date(date1).getMonth() + 1) : '0' + (new Date(
						date1)
					.getMonth() + 1);
				let date = new Date(date1).getDate() > 9 ? new Date(date1).getDate() : '0' + new Date(date1).getDate();
				let hours = new Date(date1).getHours() > 9 ? new Date(date1).getHours() : '0' + new Date(date1).getHours();
				let minutes = new Date(date1).getMinutes() > 9 ? new Date(date1).getMinutes() : '0' + new Date(date1)
					.getMinutes();
				let seconds = new Date(date1).getSeconds() > 9 ? new Date(date1).getSeconds() : '0' + new Date(date1)
					.getSeconds();
				if (str === "year") {
					// return `${year}` + app.$i18n.t('年') + `${month}` + app.$i18n.t('月') + `${date}` + app.$i18n.t('日') + `${hours}:${minutes}:${seconds}`
					return `${year}.${month}.${date} ${hours}:${minutes}:${seconds}`
				}
				if (str === "date") {
					return `${year + `-` + month + `-` + date}`
				}
				return `${year + str + month + str + date} ${hours}:${minutes}:${seconds}`
			},
			request() {
				this.$u.api.order.getRateList({
					type: this.type,
					page: this.page
				}).then(res => {
					res.forEach(element => {
						element.from_user.avatar = IMAGE_URL + element.from_user.avatar
						element.images.forEach((ele, index) => {
							element.images[index] = IMAGE_URL + element.images[index]
						})
					});
					this.critic = res
					// console.log(this.critic);
				})
			},
			change(index) {
				this.current = index
				this.type = index + 1
				this.page = 1
				this.request()
			},
			// 查看详情
			detail(id, type, join_order_id) {
				if ((type == 'goods') || (type == 'transport') || (type == 'crossborder')) {
					console.log('lang:', this.lang);
					this.$u.api.order.getCooperationOrderDetail({
						id: join_order_id,
						lang: this.lang
					}).then(res => {
						//关联子订单
						console.log('res:',res);
						// that.rlated_orders = res.rlated_orders
						// that.orderDetail = res

					})
					// this.$u.route({
					// 	url: "/pages/ordering/orderDetail",
					// 	params: {
					// 		id: id,
					// 		join_order_id:join_order_id,
					// 		status: 3,
					// 		isDetail: true
					// 	}
					// })
				} else {
					this.$u.route({
						url: "/pages/order/published/published",
						params: {
							id: id,
							status: 3,
							isDetail: true
						}
					})
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
	}

	.evaluate {
		min-height: 100vh;
		background-color: #f2f2f2;
		overflow: scroll;
	}

	._evaluate {
		padding: 17rpx 20rpx 0 19rpx;
		height: 100%;
	}

	.Evaluation_details {
		width: 100%;
		background-color: white;
		// min-height: 308rpx;
		border-radius: 20rpx;
		padding: 36rpx 17rpx 31rpx 43rpx;
		display: flex;
		flex-direction: column;
		margin-bottom: 22rpx;
	}

	.xing {}

	._Evaluation_details {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.Score {}

	.my {
		display: flex;
		align-items: center;

		image {
			width: 70rpx;
			height: 70rpx;
			border-radius: 50%;
		}

		.message {
			flex: 1;

			p:nth-child(1) {
				font-size: 30rpx;
				font-weight: 600;
				color: #000000;
				line-height: 35rpx;
			}

			p:nth-child(2) {
				font-size: $my-font-size21;
				font-weight: 400;
				color: #787878;
				line-height: 30rpx;
			}

			p {
				margin-left: 27rpx;
			}
		}
	}

	.described {
		margin-top: 26rpx;
		font-size: $my-font-size21;

		font-weight: 400;
		color: #353535;
		line-height: 38rpx;
		padding-right: 22rpx;
	}

	.bottom {
		display: flex;
		align-items: flex-end;
		flex: 1;
		font-size: $my-font-size21;

		font-weight: 400;
		color: #AAAAAA;
		line-height: 30rpx;
		margin-top: 33rpx;
	}

	.tp {
		margin-top: 20rpx;
		padding-right: 20rpx;
		width: 100%;
		display: grid;
		grid-template-columns: repeat(3, 194rpx);
		justify-content: space-between;
		grid-gap: 10px 0;
		// image {
		//   width: 194rpx;
		//   height: 199rpx;
		//   margin: 20rpx 20rpx 0 0;
		//   float: left;
		// }
	}

	.ui-image {
		border-radius: 20rpx;
		box-shadow: 0px 0px 8px 0px #ababab;
		overflow: hidden;
	}
</style>